<template>
    <div class="view-profile">
      <el-row :gutter="20">
        <el-col :span="6" v-for="pet in pets" :key="pet.id">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="pet.avatar" class="pet-avatar" alt="宠物头像">
            <div style="padding: 14px;">
              <span>{{ pet.name }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ViewProfile',
    data() {
      return {
        pets: [
          { id: 1, name: '小白', avatar: 'https://img2.baidu.com/it/u=4244849775,33308233&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715878800&t=47b3766cade05ce9c89615d618dca226' },
          { id: 2, name: '黑米', avatar: 'https://img2.baidu.com/it/u=2145449703,217210680&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715878800&t=026e109676f3182e44e99a9d27458203' }
          // 更多宠物数据
        ]
      };
    }
  }
  </script>
  
  <style scoped>
  .view-profile {
    margin: 20px;
  }
  
  .pet-avatar {
    width: 100%;
    height: auto; /* 根据图片自然高度调整 */
    display: block; /* 确保没有额外空间 */
  }
  </style>
  